<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>中华</title>
</head>
<body>
    <!-- 小图 -->
    <div style="background-color:red;border: dotted; height: 50px; width: 50px">
        <img src="img/01.jpg" id="small" style="width: 50px; height: 50px;">
    </div>
    <!-- 大图 -->
    <div style="border: double ;width: 400px; height: 400px; position: absolute; left: 500px; top:10px">
        <img src="" id="big" style="width: 400px; height: 400px; display: none;">
    </div>
    
    <!-- 开始和结束按钮 -->
    <input id="startBtn" type="button" style="width: 150px;height: 150px; font-size: 20px" value="开始">
    <input id="stopBtn" type="button" style="width: 150px;height: 150px; font-size: 20px" value="停止">
</body>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        //创建数组保存图片的地址
        let imgs =[
                    "img/01.jpg",
                    "img/02.jpg",
                    "img/03.jpg",
                    "img/04.jpg",
                    "img/05.jpg",
                    "img/06.jpg",
                    "img/07.jpg",
                    "img/08.jpg",
                    "img/09.jpg",
                    "img/10.jpg",
                ];
        //创建计数器
        let count = 0;
        //创建定时器对象
        let time =null;
        //声明图片的路径变量
        let imgSrc="";
        //给开始按钮绑定事件
        $("#startBtn").click(function(){
            //禁用开始按钮
            $("#startBtn").prop("disabled",true);
            //给停止按钮添加点击事件
            $("#stopBtn").prop("disabled",false);
                //设置定时器，循环显示
               time = setInterval(function(){
                    //获取数组的角标
                    let index =count % imgs.length;
                    //给图片路径赋值
                    imgSrc =imgs[index];
                    //给小图附上img附上添加地址路径
                    $("#small").prop("src",imgSrc);
                    //计数器自增
                    count++;
                },10);
        });
        //给停止按钮绑定事件
        $("#stopBtn").click(function(){
            //停止循环
             clearInterval(time);
            //禁用停止按钮
            $("#stopBtn").prop("disabled",true);
            //给开始按钮添加点击事件
            $("#startBtn").prop("disabled",false);
           
            //直接获取图片的路径，imgSrc的作用域是全局的
            $("#big").prop("src",imgSrc);
            $("#big").prop("style","width: 400px; height: 400px;");
        });
    </script>
</html>